﻿<!DOCTYPE html>
<!--
    quirli, replay with ease.
    Copyright (C) 2014 by marcel suter, marcel@codeministry.ch

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
<html ng-app lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="content-language" content="en" />
    <meta name="Copyright" content="GPLv3 licensed by codeministry.ch" />
    <meta name="dc.language" content="en" />
    <meta name="geo.country" content="CH" />  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Media player for replay and rehearsal with cues.">
    <meta name="author" content="codeministry.ch">
    <link rel="shortcut icon" href="img/favicon.ico">

    <title>quirli - replay and share media with cues</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">    
    <!-- Bootstrap theme -->
    <link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">    
    <!-- use a customized bootstrap version for quirli, postpending the Bootstrap core CSS.-->
    <link href="bootstrap/css/quirli-mods.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="bootstrap/css/navbar-fixed-top.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    
    <!-- Loading from own server to avoid dependency on other resources. This also simplifies offline usage-->
    <script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="angularjs/1.0.5/angular.min.js"></script>

	<!-- Load the playlist angular controller.-->
	 <script src="js/playlistcontroller.js"></script>
    
    <!-- Load the presenter code for this view -->
    <script src="js/playlistpresenter.js"></script>    

    <!-- The JSONP loader library (by www.nonobtrusive.com)-->
    <script src="lightweightjsonp/jsonp.js"></script>
</head>
<body role="document">
    <!-- Fixed navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html">quirli
                    <img src="img/quirli_app_icon_16x16.png" />
                    <small><em>replay with ease.</em></small>&nbsp;<span class="label label-danger">Beta</span></a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
          	<!--nothing to show here right now -->
           </ul>
          <ul class="nav navbar-nav navbar-right">
          	<!--nothing to show here right now -->
           </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>  
    <div class="container" ng-controller="playlistcontroller">
	    <!--Error notification-->
	    <div id="errordisplay">
		    <div class="alert alert-danger">
		    <h4>Please enable JavaScript to use quirli.</h4>
		    </div>
	    </div>
	    <div id="progressdisplay">
		    <div class="alert alert-info">
		    <h4>Loading...</h4>
		    </div>
	    </div>
	    <h1>{{title}}</h1>
	
	    <!--Unfortunately, bootstrap-style tooltips do not work for the repeated links-->
		<div id="tracksdisplay">
	        <div class="quirliactionbuttons">
				<span ng-repeat="track in tracks">
	                <a href="#" title="Loads the track &quot;{{track.title}}&quot; into the player" data-placement="top" data-toggle="tooltip" data-original-title="Loads the track &quot;{{track.title}}&quot; into the player" class="btn btn-primary" ng-click="loadTrack(track.url)"><span class="glyphicon glyphicon-play-circle"></span>&nbsp;{{track.title}}</a>
				</span>
	        </div>
		</div>
    </div> <!-- /container -->
    <p/>
    <!-- Footer (repeated on every page intentionally, as iframes with the seamless attribute are not yet universally supported)
        ================================================== -->
    <div id="footer">
      <div class="container">
        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Created by <a href="http://www.codeministry.ch">codeministry.ch</a>. Hosted by <a href="http://www.cyon.ch">cyon.ch</a>.
        <br/>	
        Licensed under the open source <a href="gpl-3.0.txt">GPLv3 License</a>
			<span class="muted">&nbsp;&middot;&nbsp;</span>
			<a href="http://quirli.codeplex.com">Source</a>
			<span class="muted">&nbsp;&middot;&nbsp;</span>
			<a href="disclaimer.txt">Disclaimer</a>
		</p>
      </div>
    </div> <!-- /footer -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- jquery is required to get loaded earlier for angular -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>
